<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>新增地址</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="__PUBLIC__/css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/app.css" />
    <script type="text/javascript" src="__PUBLIC__/js/jquery-3.2.1.min.js"></script>
    <script src="__PUBLIC__/layer_mobile/layer.js"></script>
    <style>
        input{
            text-align: right;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a style="position:absolute;z-index: 2"  class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <a href="{:U('my_address')}" style='position:absolute; z-index:3; width:40px; height:40px; left:0px; top:0px;background: blue;opacity:0'></a>
    <h1 class="mui-title">新增地址</h1>
</header>
<div class="mui-content">
    <form class="mui-input-group mui-dz">
        <div class="mui-input-row">
            <label>收货人</label>
            <input id="name" type="text" class="mui-input-sz" placeholder="请填写收货人的姓名">
        </div>
        <div class="mui-input-row">
            <label>联系电话</label>

            <input id="phone" type="text" class="mui-input-sz" placeholder="请填写收货人手机号码">

        </div>
        <div class="mui-input-row h50 pr">
           <!-- <i class="mui-jszl-icon mui-city-icon  mui-pull-left"></i>-->
            <label style="padding-left: 15px !important;" class="pl40">选择城市</label>
            <!--<input style="width: 50%"  onfocus="this.blur();" id="choseCity" type="text" class="mt5 mui-input mui-yuuye" placeholder="请选择">-->
            <!--<input id="value1" type="hidden" value="20,234,504"/>-->
            <div style="width: 4rem;float: left;margin-left: 2rem">
                <select name="ProvID" id="city1" style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
                    <option value="0">选择省</option>
                    <foreach name="data.ReturnData" item="vo">
                            <option value="{$vo.ProvID}">{$vo.Prov}</option>
                    </foreach>
                </select>
            </div>
            <div style="width:4rem;float: left;">
                <select name="CityID" id="city2" style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
                    <option value="0">请选择</option>
                </select>
            </div>
            <div style="width: 4rem;float: left;">
                <select name="DistrictID" id="city3" style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
                    <option value="0">请选择</option>
                </select>
            </div>
        </div>
        <div class="mui-input-row bornone">
            <label>详细地址</label>

            <input id="xiangxi" type="text" class="mui-input-sz" placeholder="请填写详细地址，不少于5个字">

        </div>

    </form>
    <div class="mui-input-row" style="margin: 10px 5px;">
        <div id="textarea" rows="5" placeholder="" class="zw"></div>
    </div>
    <div class="zwbg"></div>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <span>设为默认</span>
            <div id="check" class="mui-switch mui-switch-blue mui-switch-mini">
                <div class="mui-switch-handle"></div>
            </div>
        </li>
    </ul>
    <button type="button" id="baocun" class="btnpf mui-btn-sz">保存</button>
</div>
<script src="__PUBLIC__/js/mui.min.js"></script>
</body>

</html>
<script>
    //城市选择
    $('#city1').change(function()
        {
            var id = $(this).val()
            if(id == 0)
            {
                str='<option value="0">选择市</option>';
                $('#city2').html(str)
                return false
            }
            $.post("{:U('get_city')}",{id:id},function (rel) {
                str='<option value="0">选择市</option>';
                $.each(rel, function(key, val) {
                    str+='<option value="'+val.CityID+'">'+val.City+'</option>';
                });
                $('#city2').html(str)
            })
        }
    )
    //城市选择
    $('#city2').change(function()
        {
            var cid = $('#city1').val()
            var id = $(this).val()
            if(id == 0)
            {
                str='<option value="0">选择区</option>';
                $('#city3').html(str)
                return false
            }
            $.post("{:U('get_city1')}",{cid:cid,id:id},function (rel) {
                str='<option value="0">选择区</option>';
                $.each(rel, function(key, val) {
                    str+='<option value="'+val.ID+'">'+val.Name+'</option>';
                });
                $('#city3').html(str)
            })
        }
    )
</script>
<script>
    $('#baocun').click(function () {
        var name = $('#name').val()
        if(name == '')
        {
            layer.open({
                content: '请输入收货人姓名'
                ,btn: '我知道了'
            });
            return false
        }
        var phone = $('#phone').val()
        if(isMobileNumber(phone) === false)
        {
            return false
        }
        var city1 = $('#city1').val()
        var city2 = $('#city2').val()
        var city3 = $('#city3').val()

        if((city3 == '' || city3==0) || (city2 == '' || city2==0) ||(city1 == '' || city1==0) )
        {
            layer.open({
                content: '请选择省市县'
                ,btn: '我知道了'
            });
            return false
        }
        //详细地址
        var address = $('#xiangxi').val()
        if(address == '')
        {
            layer.open({
                content: '请填写详细地址'
                ,btn: '我知道了'
            });
            return false
        }
        if($('#check').hasClass('mui-active'))
        {
            //设为默认
            var defaults = 1
        }
        else
        {
            //不设为默认
            var defaults = 0
        }
        $.post("{:U('address_post')}",{name:name,phone:phone,city1:city1,city2:city2,city3:city3,address:address,defaults:defaults},function (rel) {

                layer.open({
                    content: rel.msg
                    ,btn: '我知道了'
                });

        })
    })
</script>
<script>
    function isMobileNumber(phone) {
        var flag = false;
        var message = "";
        var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
        if (phone == '') {
            // console.log("手机号码不能为空");
            message = "手机号码不能为空！";
        } else if (phone.length != 11) {
            //console.log("请输入11位手机号码！");
            message = "请输入11位手机号码！";
        } else if (!myreg.test(phone)) {
            //console.log("请输入有效的手机号码！");
            message = "请输入有效的手机号码！";
        } else {
            flag = true;
        }
        if (message != "") {
            layer.open({
                content: message
                ,btn: '我知道了'
            });
            return false
        }
        return flag;
    }
</script>